<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>耗材管理 - 家庭工具管理</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#FF7EB9',
                        secondary: '#9775FA',
                        tertiary: '#80BCBD',
                        quaternary: '#FFB627',
                        danger: '#FF5252',
                        warning: '#FFD60A',
                        success: '#06D6A0',
                        info: '#118AB2',
                        background: '#F9F9F9',
                        card: '#FFFFFF'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .shadow-cute {
                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
            }
            .bg-gradient-cute {
                background: linear-gradient(135deg, #FF7EB9 0%, #9775FA 100%);
            }
            .text-shadow-sm {
                text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
            }
        }
    </style>
</head>
<body class="bg-gray-50 h-full">
    <!-- 页面内容 -->
    <div class="h-full flex flex-col">
        <!-- 顶部导航栏 -->
        <div class="bg-gradient-cute shadow-md">
            <div class="flex items-center justify-between px-4 py-3">
                <button onclick="window.parent.navigateTo('home.html')" class="p-1 text-white">
                    <i class="fa fa-arrow-left"></i>
                </button>
                <h1 class="text-lg font-medium text-white text-shadow-sm">耗材管理</h1>
                <button class="p-2 bg-white/20 text-white rounded-full hover:bg-white/30 transition-colors shadow-md hover:shadow-lg transform hover:-translate-y-0.5 transition-all duration-300">
                    <i class="fa fa-plus text-lg"></i>
                </button>
            </div>
        </div>
        
        <!-- 搜索栏 -->
        <div class="bg-white px-4 py-3 border-b border-gray-100">
            <div class="relative">
                <input type="text" id="consumableSearch" placeholder="搜索耗材..." class="w-full pl-10 pr-4 py-2.5 rounded-xl bg-gray-50 border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/50 shadow-sm">
                <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
            </div>
        </div>
        
        <!-- 内容区域 -->
        <div class="flex-1 overflow-y-auto">
            <!-- 低库存提醒 -->
            <div class="p-4 bg-amber-50 mb-4 rounded-xl shadow-cute mx-4 mt-4">
                <div class="flex items-start">
                    <i class="fa fa-exclamation-circle text-amber-500 mt-1 mr-2"></i>
                    <div>
                        <h3 class="font-medium text-amber-800 text-sm mb-1">低库存提醒</h3>
                        <p class="text-xs text-amber-700">以下耗材库存不足，请及时补充：<span class="font-medium">电钻钻头 (剩余1个)</span>，<span class="font-medium">吸尘器滤网 (剩余0个)</span></p>
                    </div>
                </div>
            </div>
            
            <!-- 耗材列表 -->
            <div class="divide-y divide-gray-100 px-4">
                <!-- 耗材1 -->
                <div class="bg-white p-5 rounded-xl shadow-cute hover:shadow-lg transition-shadow transform hover:-translate-y-1 transition-transform duration-300">
                    <div class="flex justify-between items-start mb-3">
                        <div>
                            <h3 class="font-medium text-lg">电钻钻头</h3>
                            <p class="text-xs text-gray-500 mt-0.5">关联工具：电钻、冲击钻</p>
                        </div>
                        <span class="px-2.5 py-1 text-xs font-medium bg-danger/10 text-danger rounded-full">库存不足</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <div class="flex items-center">
                            <span class="text-sm text-gray-600">库存：</span>
                            <span class="text-sm font-medium text-danger ml-1">1</span>
                            <span class="text-xs text-gray-400 mx-1">/</span>
                            <span class="text-xs text-gray-400">警戒线：3</span>
                        </div>
                        <div class="flex items-center space-x-3">
                            <button class="text-sm text-primary hover:text-primary/80 transition-colors">
                                <i class="fa fa-pencil mr-1"></i>编辑
                            </button>
                            <button class="text-sm text-secondary hover:text-secondary/80 transition-colors">
                                <i class="fa fa-plus-circle mr-1"></i>补充
                            </button>
                        </div>
                    </div>
                    <div class="mt-3 text-xs text-gray-500">
                        <div class="flex justify-between">
                            <span>型号：PD-25 8mm</span>
                            <span>上次补充：2023-06-15</span>
                        </div>
                    </div>
                </div>
                
                <!-- 耗材2 -->
                <div class="bg-white p-5 rounded-xl shadow-cute hover:shadow-lg transition-shadow transform hover:-translate-y-1 transition-transform duration-300">
                    <div class="flex justify-between items-start mb-3">
                        <div>
                            <h3 class="font-medium text-lg">吸尘器滤网</h3>
                            <p class="text-xs text-gray-500 mt-0.5">关联工具：吸尘器</p>
                        </div>
                        <span class="px-2.5 py-1 text-xs font-medium bg-danger/10 text-danger rounded-full">需要补充</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <div class="flex items-center">
                            <span class="text-sm text-gray-600">库存：</span>
                            <span class="text-sm font-medium text-danger ml-1">0</span>
                            <span class="text-xs text-gray-400 mx-1">/</span>
                            <span class="text-xs text-gray-400">警戒线：2</span>
                        </div>
                        <div class="flex items-center space-x-3">
                            <button class="text-sm text-primary hover:text-primary/80 transition-colors">
                                <i class="fa fa-pencil mr-1"></i>编辑
                            </button>
                            <button class="text-sm text-secondary hover:text-secondary/80 transition-colors">
                                <i class="fa fa-plus-circle mr-1"></i>补充
                            </button>
                        </div>
                    </div>
                    <div class="mt-3 text-xs text-gray-500">
                        <div class="flex justify-between">
                            <span>型号：VC-FL-12</span>
                            <span>上次补充：2023-05-20</span>
                        </div>
                    </div>
                </div>
                
                <!-- 耗材3 -->
                <div class="bg-white p-5 rounded-xl shadow-cute hover:shadow-lg transition-shadow transform hover:-translate-y-1 transition-transform duration-300">
                    <div class="flex justify-between items-start mb-3">
                        <div>
                            <h3 class="font-medium text-lg">园艺剪替换刀片</h3>
                            <p class="text-xs text-gray-500 mt-0.5">关联工具：园艺剪</p>
                        </div>
                        <span class="px-2.5 py-1 text-xs font-medium bg-warning/10 text-warning rounded-full">库存偏低</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <div class="flex items-center">
                            <span class="text-sm text-gray-600">库存：</span>
                            <span class="text-sm font-medium text-warning ml-1">2</span>
                            <span class="text-xs text-gray-400 mx-1">/</span>
                            <span class="text-xs text-gray-400">警戒线：3</span>
                        </div>
                        <div class="flex items-center space-x-3">
                            <button class="text-sm text-primary hover:text-primary/80 transition-colors">
                                <i class="fa fa-pencil mr-1"></i>编辑
                            </button>
                            <button class="text-sm text-secondary hover:text-secondary/80 transition-colors">
                                <i class="fa fa-plus-circle mr-1"></i>补充
                            </button>
                        </div>
                    </div>
                    <div class="mt-3 text-xs text-gray-500">
                        <div class="flex justify-between">
                            <span>型号：GS-BL-08</span>
                            <span>上次补充：2023-07-01</span>
                        </div>
                    </div>
                </div>
                
                <!-- 耗材4 -->
                <div class="bg-white p-5 rounded-xl shadow-cute hover:shadow-lg transition-shadow transform hover:-translate-y-1 transition-transform duration-300">
                    <div class="flex justify-between items-start mb-3">
                        <div>
                            <h3 class="font-medium text-lg">电锯链条</h3>
                            <p class="text-xs text-gray-500 mt-0.5">关联工具：电锯</p>
                        </div>
                        <span class="px-2.5 py-1 text-xs font-medium bg-success/10 text-success rounded-full">库存充足</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <div class="flex items-center">
                            <span class="text-sm text-gray-600">库存：</span>
                            <span class="text-sm font-medium text-success ml-1">5</span>
                            <span class="text-xs text-gray-400 mx-1">/</span>
                            <span class="text-xs text-gray-400">警戒线：3</span>
                        </div>
                        <div class="flex items-center space-x-3">
                            <button class="text-sm text-primary hover:text-primary/80 transition-colors">
                                <i class="fa fa-pencil mr-1"></i>编辑
                            </button>
                            <button class="text-sm text-secondary hover:text-secondary/80 transition-colors">
                                <i class="fa fa-plus-circle mr-1"></i>补充
                            </button>
                        </div>
                    </div>
                    <div class="mt-3 text-xs text-gray-500">
                        <div class="flex justify-between">
                            <span>型号：SC-CH-16</span>
                            <span>上次补充：2023-04-10</span>
                        </div>
                    </div>
                </div>
                
                <!-- 耗材5 -->
                <div class="bg-white p-5 rounded-xl shadow-cute hover:shadow-lg transition-shadow transform hover:-translate-y-1 transition-transform duration-300">
                    <div class="flex justify-between items-start mb-3">
                        <div>
                            <h3 class="font-medium text-lg">电池组</h3>
                            <p class="text-xs text-gray-500 mt-0.5">关联工具：电动螺丝刀、电钻、电锯</p>
                        </div>
                        <span class="px-2.5 py-1 text-xs font-medium bg-success/10 text-success rounded-full">库存充足</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <div class="flex items-center">
                            <span class="text-sm text-gray-600">库存：</span>
                            <span class="text-sm font-medium text-success ml-1">6</span>
                            <span class="text-xs text-gray-400 mx-1">/</span>
                            <span class="text-xs text-gray-400">警戒线：4</span>
                        </div>
                        <div class="flex items-center space-x-3">
                            <button class="text-sm text-primary hover:text-primary/80 transition-colors">
                                <i class="fa fa-pencil mr-1"></i>编辑
                            </button>
                            <button class="text-sm text-secondary hover:text-secondary/80 transition-colors">
                                <i class="fa fa-plus-circle mr-1"></i>补充
                            </button>
                        </div>
                    </div>
                    <div class="mt-3 text-xs text-gray-500">
                        <div class="flex justify-between">
                            <span>型号：BT-20V-4AH</span>
                            <span>上次补充：2023-06-05</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加耗材的模态框 -->
        <div id="addConsumableModal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden backdrop-blur-sm">
            <div class="bg-white rounded-2xl shadow-xl w-5/6 max-w-sm p-6 transform transition-all duration-300 hover:shadow-2xl">
                <div class="flex justify-between items-center mb-5">
                    <h3 class="text-xl font-semibold text-gray-800">添加耗材</h3>
                    <button id="closeModalBtn" class="text-gray-500 hover:text-gray-700 p-1 rounded-full hover:bg-gray-100 transition-colors">
                        <i class="fa fa-times text-xl"></i>
                    </button>
                </div>
                <form id="addConsumableForm">
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1.5">耗材名称</label>
                        <input type="text" class="w-full px-4 py-2.5 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary transition-all" placeholder="输入耗材名称（如：电钻钻头）">
                    </div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1.5">关联工具</label>
                        <select class="w-full px-4 py-2.5 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary transition-all">
                            <option value="">请选择关联工具</option>
                            <option value="1">电钻</option>
                            <option value="2">电动螺丝刀</option>
                            <option value="3">电锯</option>
                            <option value="4">吸尘器</option>
                            <option value="5">园艺剪</option>
                        </select>
                        <div class="mt-1 text-xs text-gray-500">
                            <button type="button" class="text-blue-600">
                                <i class="fa fa-plus-circle mr-1"></i>添加更多工具
                            </button>
                        </div>
                    </div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1.5">型号/规格</label>
                        <input type="text" class="w-full px-4 py-2.5 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary transition-all" placeholder="输入型号或规格（如：PD-25 8mm）">
                    </div>
                    <div class="grid grid-cols-2 gap-3 mb-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1.5">当前库存</label>
                            <input type="number" min="0" class="w-full px-4 py-2.5 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary transition-all" placeholder="输入库存数量">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1.5">库存警戒线</label>
                            <input type="number" min="1" class="w-full px-4 py-2.5 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary transition-all" placeholder="输入警戒线">
                        </div>
                    </div>
                    <div class="mb-5">
                        <label class="block text-sm font-medium text-gray-700 mb-1.5">备注（可选）</label>
                        <textarea class="w-full px-4 py-2.5 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary transition-all" placeholder="输入耗材备注信息" rows="2"></textarea>
                    </div>
                    <div class="flex space-x-3">
                        <button type="button" id="cancelAddBtn" class="flex-1 px-5 py-2.5 border border-gray-200 rounded-full text-gray-700 hover:bg-gray-50 transition-colors font-medium shadow-sm hover:shadow">取消</button>
                        <button type="submit" class="flex-1 px-5 py-2.5 bg-primary text-white rounded-full hover:bg-primary/90 transition-colors font-medium shadow-md hover:shadow-lg">保存</button>
                    </div>
                </form>
            </div>
        </div>

    <!-- 补充耗材的模态框 -->
        <div id="replenishConsumableModal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden backdrop-blur-sm">
            <div class="bg-white rounded-2xl shadow-xl w-5/6 max-w-sm p-6 transform transition-all duration-300 hover:shadow-2xl">
                <div class="flex justify-between items-center mb-5">
                    <h3 class="text-xl font-semibold text-gray-800">补充耗材</h3>
                    <button id="closeReplenishModalBtn" class="text-gray-500 hover:text-gray-700 p-1 rounded-full hover:bg-gray-100 transition-colors">
                        <i class="fa fa-times text-xl"></i>
                    </button>
                </div>
                <form id="replenishConsumableForm">
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1.5">耗材名称</label>
                        <input type="text" class="w-full px-4 py-2.5 border border-gray-200 rounded-xl bg-gray-50" value="电钻钻头" disabled>
                    </div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1.5">补充数量</label>
                        <input type="number" min="1" class="w-full px-4 py-2.5 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-secondary focus:border-secondary transition-all" placeholder="输入补充数量">
                    </div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1.5">补充日期</label>
                        <input type="date" class="w-full px-4 py-2.5 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-secondary focus:border-secondary transition-all">
                    </div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1.5">购买渠道（可选）</label>
                        <input type="text" class="w-full px-4 py-2.5 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-secondary focus:border-secondary transition-all" placeholder="输入购买渠道（如：五金店、网购）">
                    </div>
                    <div class="mb-5">
                        <label class="block text-sm font-medium text-gray-700 mb-1.5">备注（可选）</label>
                        <textarea class="w-full px-4 py-2.5 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-secondary focus:border-secondary transition-all" placeholder="输入补充备注信息" rows="2"></textarea>
                    </div>
                    <div class="flex space-x-3">
                        <button type="button" id="cancelReplenishBtn" class="flex-1 px-5 py-2.5 border border-gray-200 rounded-full text-gray-700 hover:bg-gray-50 transition-colors font-medium shadow-sm hover:shadow">取消</button>
                        <button type="submit" class="flex-1 px-5 py-2.5 bg-secondary text-white rounded-full hover:bg-secondary/90 transition-colors font-medium shadow-md hover:shadow-lg">确认补充</button>
                    </div>
                </form>
            </div>
        </div>

    <script>
        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化模态框
            const addConsumableModal = document.getElementById('addConsumableModal');
            const closeModalBtn = document.getElementById('closeModalBtn');
            const addConsumableBtn = document.querySelector('button:has(.fa-plus)');
            const cancelAddBtn = document.getElementById('cancelAddBtn');
            
            const replenishConsumableModal = document.getElementById('replenishConsumableModal');
            const closeReplenishModalBtn = document.getElementById('closeReplenishModalBtn');
            const cancelReplenishBtn = document.getElementById('cancelReplenishBtn');
            const replenishButtons = document.querySelectorAll('button:has(.fa-plus-circle)');
            
            // 初始化搜索功能
            const searchInput = document.getElementById('consumableSearch');
            const consumableItems = document.querySelectorAll('.bg-white.p-5');
            
            // 为所有卡片添加悬停动画效果
            const cards = document.querySelectorAll('.bg-white.rounded-xl');
            cards.forEach(card => {
                // 添加进入动画
                setTimeout(() => {
                    card.classList.add('animate-fadeIn');
                }, Math.random() * 300);
            });
            
            // 打开添加耗材模态框
            addConsumableBtn.addEventListener('click', function() {
                addConsumableModal.classList.remove('hidden');
                // 添加动画效果
                setTimeout(() => {
                    const modalContent = addConsumableModal.querySelector('.bg-white');
                    modalContent.classList.add('scale-100');
                    modalContent.classList.remove('scale-95', 'opacity-0');
                }, 10);
            });
            
            // 关闭添加耗材模态框
            function closeAddModal() {
                const modalContent = addConsumableModal.querySelector('.bg-white');
                modalContent.classList.add('scale-95', 'opacity-0');
                modalContent.classList.remove('scale-100');
                setTimeout(() => {
                    addConsumableModal.classList.add('hidden');
                }, 200);
            }
            
            closeModalBtn.addEventListener('click', closeAddModal);
            cancelAddBtn.addEventListener('click', closeAddModal);
            
            // 点击模态框外部关闭
            addConsumableModal.addEventListener('click', function(e) {
                if (e.target === addConsumableModal) {
                    closeAddModal();
                }
            });
            
            // 打开补充耗材模态框
            replenishButtons.forEach(button => {
                button.addEventListener('click', function() {
                    // 阻止添加更多工具按钮的默认行为
                    if (this.closest('.text-xs')) return;
                    
                    const consumableName = this.closest('.bg-white').querySelector('h3').textContent;
                    const form = document.getElementById('replenishConsumableForm');
                    form.querySelector('input[disabled]').value = consumableName;
                    
                    replenishConsumableModal.classList.remove('hidden');
                    // 添加动画效果
                    setTimeout(() => {
                        const modalContent = replenishConsumableModal.querySelector('.bg-white');
                        modalContent.classList.add('scale-100');
                        modalContent.classList.remove('scale-95', 'opacity-0');
                    }, 10);
                });
            });
            
            // 为编辑按钮添加事件监听
            document.querySelectorAll('button:has(.fa-pencil)').forEach(button => {
                button.addEventListener('click', function() {
                    const consumableName = this.closest('.bg-white').querySelector('h3').textContent;
                    
                    // 设置模态框中的耗材信息
                    const form = document.getElementById('addConsumableForm');
                    form.querySelector('input[type="text"]').value = consumableName;
                    
                    // 打开添加/编辑耗材模态框
                    const modal = document.getElementById('addConsumableModal');
                    modal.classList.remove('hidden');
                    setTimeout(() => {
                        const modalContent = modal.querySelector('.bg-white');
                        modalContent.classList.add('scale-100');
                        modalContent.classList.remove('scale-95', 'opacity-0');
                    }, 10);
                });
            });
            
            // 关闭补充耗材模态框
            function closeReplenishModal() {
                const modalContent = replenishConsumableModal.querySelector('.bg-white');
                modalContent.classList.add('scale-95', 'opacity-0');
                modalContent.classList.remove('scale-100');
                setTimeout(() => {
                    replenishConsumableModal.classList.add('hidden');
                }, 200);
            }
            
            closeReplenishModalBtn.addEventListener('click', closeReplenishModal);
            cancelReplenishBtn.addEventListener('click', closeReplenishModal);
            
            // 点击模态框外部关闭
            replenishConsumableModal.addEventListener('click', function(e) {
                if (e.target === replenishConsumableModal) {
                    closeReplenishModal();
                }
            });
            
            // 搜索功能
            searchInput.addEventListener('input', function() {
                const searchTerm = this.value.toLowerCase();
                
                consumableItems.forEach(item => {
                    const consumableName = item.querySelector('h3').textContent.toLowerCase();
                    const associatedTools = item.querySelector('p').textContent.toLowerCase();
                    const model = item.querySelector('div.text-xs.text-gray-500 span:first-child').textContent.toLowerCase();
                    
                    if (consumableName.includes(searchTerm) || associatedTools.includes(searchTerm) || model.includes(searchTerm)) {
                        item.classList.remove('hidden');
                        // 添加显示动画
                        item.classList.add('animate-fadeIn');
                        setTimeout(() => {
                            item.classList.remove('animate-fadeIn');
                        }, 300);
                    } else {
                        item.classList.add('hidden');
                    }
                });
            });
            
            // 添加耗材表单提交
            const addConsumableForm = document.getElementById('addConsumableForm');
            addConsumableForm.addEventListener('submit', function(e) {
                e.preventDefault();
                
                // 收集表单数据
                const name = addConsumableForm.querySelectorAll('input[type="text"]')[0].value;
                const toolSelect = addConsumableForm.querySelector('select');
                const model = addConsumableForm.querySelectorAll('input[type="text"]')[1].value;
                const stock = addConsumableForm.querySelector('input[type="number"]').value;
                const threshold = addConsumableForm.querySelectorAll('input[type="number"]')[1].value;
                
                if (!name || !toolSelect.value || !model || !stock || !threshold) {
                    showToast('⚠️ 请填写完整的耗材信息', 'error');
                    return;
                }
                
                // 模拟添加耗材
                showToast('🎉 成功添加耗材：' + name, 'success');
                closeAddModal();
                
                // 重置表单
                addConsumableForm.reset();
            });
            
            // 补充耗材表单提交
            const replenishConsumableForm = document.getElementById('replenishConsumableForm');
            replenishConsumableForm.addEventListener('submit', function(e) {
                e.preventDefault();
                
                // 收集表单数据
                const name = replenishConsumableForm.querySelector('input[disabled]').value;
                const quantity = replenishConsumableForm.querySelector('input[type="number"]').value;
                const date = replenishConsumableForm.querySelector('input[type="date"]').value;
                
                if (!quantity || !date) {
                    showToast('⚠️ 请填写补充数量和补充日期', 'error');
                    return;
                }
                
                // 模拟补充耗材
                showToast('🎊 成功补充耗材：' + name + '，数量：' + quantity, 'success');
                closeReplenishModal();
                
                // 重置表单
                replenishConsumableForm.querySelectorAll('input:not([disabled])').forEach(input => {
                    input.value = '';
                });
                replenishConsumableForm.querySelector('textarea').value = '';
            });
            
            // 可爱风格的Toast提示函数
            function showToast(message, type = 'info') {
                // 创建toast元素
                const toast = document.createElement('div');
                
                // 设置基本样式
                toast.className = 'fixed bottom-6 right-6 px-5 py-3 rounded-full shadow-lg transform transition-all duration-500 ease-in-out z-50 translate-y-10 opacity-0';
                
                // 根据类型设置样式
                if (type === 'success') {
                    toast.classList.add('bg-success', 'text-white');
                } else if (type === 'error') {
                    toast.classList.add('bg-danger', 'text-white');
                } else {
                    toast.classList.add('bg-primary', 'text-white');
                }
                
                // 设置消息
                toast.textContent = message;
                
                // 添加到页面
                document.body.appendChild(toast);
                
                // 动画入场
                setTimeout(() => {
                    toast.classList.add('translate-y-0', 'opacity-100');
                    toast.classList.remove('translate-y-10', 'opacity-0');
                }, 10);
                
                // 2秒后自动消失
                setTimeout(() => {
                    toast.classList.add('translate-y-10', 'opacity-0');
                    toast.classList.remove('translate-y-0', 'opacity-100');
                    
                    // 动画结束后移除元素
                    setTimeout(() => {
                        document.body.removeChild(toast);
                    }, 500);
                }, 2000);
            }
        });
    </script>
</body>
</html>